先来一张示例集合，感受一下 Echarts 经典图表和大屏图表的“距离”。

（Tips：深入图表本身的细节观察，你会发现很多不一样）

两种图表集合一一对应，但经过我们的设计师一番精心设计打磨之后，差别却非常大。那么后者实现起来有多难呢？经过实践我们得出的答案是：“可千里也可毫厘，距离几何，全看自己！”

千里是为何？

如果你没有数学几何基础，光 Echarts 的配置都能把你难哭（不是黑，专业工具确实需要专业基础）。

毫厘又是为何？

如果你熟悉各种坐标系，对函数变换和视觉编码比较熟悉，那很容易实现，但是美化和细节精调依旧需要花费功夫。

接下来会依次对六个图表进行剖析，来讲解具体的实现（配置）过程。

1、从最简单的玫瑰图开始说起

看到这个图的第一反应是这是一个加了背景并限制了起止角度的饼图，实现起来也比较容易，在构造 Echarts 配置项中需要注意三点：

在这个示例中 series 共有两个，一是用以展现数据的序列，二是用来展现背景的序列。将所有数据的角度限制在180度范围之内，为了达到这个目的，我们对传入序列的数据使用空数据进行了扩充。空数据充当占位的角色，格式如下：

用来展现背景的序列也用占位方法区分左右半圆，需要注意的是要设置背景的渐变，使用径向渐变即可：

再加上颜色等配置就可以生成最终的 options：

详细的配置和运行示例可以参考 在线示例

2、条形图（极坐标）

与玫瑰图相同的是，这个条形图也有背景，同理，基本思路也通过构造一个序列用来展示背景。首先假设数据格式如下：

在这个图中，需要注意的是数据的顺序以及数据最大值，这里使用小数点，如果 value 为 1 则表示柱子充满 360 度。根据数据可以分别生成表示背景和数据的序列配置：

然后再对标签和标签线进行配置，最后生成 options 传给 Echarts 即可：

详细的配置和运行示例可以参考 在线示例

3、条形图

这个图中比较特殊的有个部分，一是整个图的背景渐变，二是每个条形图顶部的圆点标记。

背景渐变和每个条形图的黑色背景可以使用同一个序列生成，主要思路是根据数据大小为每个条形图设置固定高度的黑色背景，同时设置其背景阴影：

然后是表示数据的序列配置：

最后生成 Echarts 的 options 即可，详细的配置和运行示例可以参考 在线示例

4、圆饼图

这个图的主要难点在怎么绘制出完美的渐变效果。在 Canvas 中绘制颜色渐变时，给的接口比较简单，也就是给定两个 (0, 0) 至 (1, 1) 所包含的点，让其作为颜色渐变方向的起点和终点，然后在绘制的时候会自动的填充渐变颜色。但是我们在实际的使用场景时很难取得这样 (0, 0) 至 (1, 1) 正方形范围内的坐标，也有很多场景不是凑巧就是横向颜色渐变或者纵向颜色渐变。因此需要进行一定的转换。

转换过程可以分为以下四步：

详细计算过程和示例代码可以参考 在线示例

5、柱状图(极坐标)

这个图其实是一个柱状图的变体，其功能类似于一个放置在极坐标下的柱状图（玫瑰图）

从功能上而言其实是一样的，但是美观程度嘛，就上升了不止一个数量级。首先，我们先来看“柱子”，常见的柱子，都是一个矩形，而此处的柱子是使用的多条“凸曲线”拟合的，比如“正弦曲线”：

但是“正弦曲线”存在着负值，而“柱子”的高度是不可能为负数的，那么怎么办呢，有两种方法，可以将正弦曲线平移为：

或者使用正弦函数的平方：

在这里我们选择的是后者。当然，在选择“凸曲线”的过程中，我们还尝试了：

其效果如下，不如正弦曲线平滑，对比如下图：

选择好“凸曲线”后，我们使用 line 来模拟柱子。但是在绘制 line 之前，我们需要计算出 line 中的点，即对每条 line 进行采样，单条线是无法模拟出柱子的效果的，单条先模拟出来的是趋势图，在给出的示例代码中，我们使用的是 12 条 line，只有最外层的那一条才会达到柱子的真实高度，其余的都会等比例进行缩放，采样精度和过程如下：

每一根柱子上的每一条线都会进行20次采样，如果这个数字设置的过低，会使柱子看起来不平滑，如下图从左到右采样精度逐渐提高：

采样部分核心代码如下：

然后生成 series 配置:

详细的拟合过程和代码可以参考 在线示例

6、仪表盘

这是 2 个仪表盘，右边的是 Echarts 默认的仪表盘,和右边的相比左边的明显更美观一些。那么怎么我们是怎么做到这些效果的呢？这个图主要分为内外两层，外层即仪表盘刻度部分，内层为环形柱状图部分（图中绿色部分）。

先说内层部分，内层主要由一个堆叠 Series Bar 组成，如下图红色标明的地方，绿色块（Bar类型1），绿色块间隔（Bar类型2），以及后面的留白部分（Bar类型3）其实都是堆叠Bar的一部分，在这里只需要计算好每个堆叠部分的数量值，然后设置各自的填充颜色让其堆叠即可。

生成 Series Bar 的关键代码：

外层部分，由于 Echarts 自带的单个仪表盘参数可设置范围有限。因此在外层部分，我们其实是由三个仪表盘合成起来组成一个仪表盘的。这三个仪表盘分别只有部分显示出来，构成了外层的这个大仪表盘。

最后，在图表的最底端，有一个六边形。这个六边形放置在此处的设计可能是为了视觉色彩的平衡，实现的时候，是放置了一个空的雷达图在此处。

详细配置项细节可以参考 在线示例

Echarts 已经做到了通用和易用，但是从通用需求到客户侧定制需求的距离需要的是开发者提高自身来缩短。

精力有限，本次分享先到此结束，如果您有更优雅的实现方式欢迎留言探讨，共同进步。

更多炫酷的大屏图表实践敬请期待 :)

最后，欢迎对数据可视化和可视分析有兴趣的小伙伴们参加 2019ChinaVIS 可视分析挑战赛，挑战赛详细信息可戳下面链接：